<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>ESP32S3 透明小电视配网</title>
    <style>
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        h1 {
            font-size: 20px;
            padding: 8px 10px;
            box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
        }

        .form {
            padding: 20px;
            margin: 0 auto;
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
            color: #333;
        }

        select,
        input[type="text"],
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }

        input[type="submit"] {
            background-color: #409eff;
            color: white;
            cursor: pointer;
            margin-top: 20px;
        }

        input[type="submit"]:hover {
            background-color: #337ecc;
        }
    </style>
</head>
<body>
<h1 class="title">ESP32S3 透明小电视配网</h1>
<form id="form" class="form">
    <label for="network">选择网络：</label>
    <select id="network" name="network">

    </select>

    <label for="password">密码：</label>
    <input type="text" id="password" name="password"/>

    <input type="submit" value="提交"/>
</form>
</body>
<script>
    document.getElementById("form").addEventListener("submit", function (event) {
        event.preventDefault(); // 阻止表单默认的提交行为

        const network = document.getElementById("network").value;
        const password = document.getElementById("password").value;


        fetch("/set/wifi", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({name: network, pwd: password})
        })
            .then(function (response) {
                if (response.ok) {
                    return response.json();
                } else {
                    throw new Error("Error: " + response.status);
                }
            })
            .then(function (data) {
                console.log(data);
                // 处理服务器返回的响应数据
                alert("设置成功")
            })
            .catch(function (error) {
                console.log(error);
                // 处理错误
                alert("设置失败")
            });
    });
    window.onload = async function () {
        fetch("/wifi_list.json", {
            method: 'get'
        }).then((response) => {
            return response.json()
        }).then((data) => {
            data.forEach(item => {
                const option = document.createElement("option")
                option.value = item[0]
                option.innerText = item[0]
                document.querySelector("#network").appendChild(option)
            })
        })
    };
</script>
</html>
